<template>
    <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon >
        <el-descriptions direction="vertical" :column="3" border size="small">
            <el-descriptions-item label="姓名">{{ ruleForm.user.name }}</el-descriptions-item>
            <el-descriptions-item label="应发工资">{{ ruleForm.basic_salary }}</el-descriptions-item>
            <el-descriptions-item label="养老保险8%">{{ ruleForm.pension_insurance }}</el-descriptions-item>
            <el-descriptions-item label="医疗保险2%">{{ ruleForm.medical_insurance }}</el-descriptions-item>
            <el-descriptions-item label="失业保险0.5%">{{ ruleForm.unemployment_insurance }}</el-descriptions-item>
            <el-descriptions-item label="住房8%">{{ ruleForm.housing }}</el-descriptions-item>
            <el-descriptions-item label="社保个人部分8%">{{ ruleForm.social_security }}</el-descriptions-item>
            <el-descriptions-item label="个税合计">{{ ruleForm.tax }}</el-descriptions-item>
            <el-descriptions-item label="实发工资">{{ ruleForm.net_salary }}</el-descriptions-item>
            <el-descriptions-item label="备注"><el-input v-model="ruleForm.remarks"/></el-descriptions-item>
            <el-descriptions-item label="扣除保险个人承担部分"><el-input v-model="ruleForm.social_security" /></el-descriptions-item>
            <el-descriptions-item label="住房个人承担部分"><el-input v-model="ruleForm.housing" /></el-descriptions-item>
            <el-descriptions-item label="岗位补贴"><el-input v-model="ruleForm.job_subsidies" /></el-descriptions-item>
            <el-descriptions-item label="研发奖励"><el-input v-model="ruleForm.rewards" /></el-descriptions-item>
            <el-descriptions-item label="公司借款"><el-input v-model="ruleForm.borrow" /></el-descriptions-item>
            <el-descriptions-item label="总计（实际支付）"><el-input v-model="ruleForm.net_salary" /></el-descriptions-item>
            <el-descriptions-item label="备注"><el-input v-model="ruleForm.pay_remarks" type="textarea" :autosize="{ minRows: 4 }" /></el-descriptions-item>
        </el-descriptions>
        <el-descriptions direction="vertical" :column="3" border>
            <el-descriptions-item label="审核人"><el-text>{{ ruleForm.reviewer_id }}</el-text></el-descriptions-item>
            <el-descriptions-item label="审核结果"><el-text>{{ ruleForm.status }}</el-text></el-descriptions-item>
            <el-descriptions-item label="审核意见"><el-text>{{ ruleForm.review_comment }}</el-text></el-descriptions-item>
        </el-descriptions>
      
    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" v-if="ruleForm.reviewer_id == 0" @click="submitForm(ruleFormRef)" :loading="loading"> 重新提交 </el-button>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref,watch } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import http from '../../../../util/request';
const loading = ref<boolean>(false)

interface RuleForm {
    id: number
    user:any
    reviewer_id:number
    status: string
    review_comment:string
    basic_salary: number
    pension_insurance: number
    medical_insurance: number
    unemployment_insurance: number
    housing: number
    social_security: number
    tax: number
    net_salary: number
    remarks:string
    job_subsidies:number
    rewards:number
    borrow:number
    pay_remarks:string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id: 0,
    user:{},
    reviewer_id:0,
    status: '',
    review_comment:'/',
    basic_salary: 0,
    pension_insurance: 0,
    medical_insurance: 0,
    unemployment_insurance: 0,
    housing: 0,
    social_security: 0,
    tax: 0,
    net_salary: 0,
    remarks:'/',
    job_subsidies:0,
    rewards:0,
    borrow:0,
    pay_remarks:'/'
})

const onGetData = () => {
    // http.get('/userSalary/'+ruleForm.value.id).then((response:any)=>{
    //     ruleForm.value = response.data.data
    // })
}

const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    ruleForm.value.id = props.data
    onGetData()
},{ immediate: true })

const rules = reactive<FormRules<RuleForm>>({
    status: [
        { required: true, message: '请选择操作类型', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            http.patch('/paymentApply',ruleForm.value).then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                onSave()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onSave = () => {
    emit('onSave')
}

const emit = defineEmits(['onSave'])
</script>
<style scoped>
</style>
